<template>
	<!-- <view class="main" :style="{height:contentHeight+'px'}"> -->
	<view class="main">
		<st-navigation backgroundColor="rgba(0, 0, 0, 0)"></st-navigation>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<!-- @animationfinish="animationfinishfun" -->
					<swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun"
						:current="current_index" :circular="false" :vertical="true">
						<block v-if="dataSouce">
							<swiper-item :key="index" v-for="(item,index) in dataSouce">
								<view class="swiper-item uni-bg-black video-wrap">
									<!-- <video :src="item.video" style="width: 100vw;height: 100vh;"></video> -->
									<video objectFit="cover" :custom-cache="false" :show-fullscreen-btn="false"
										autoplay="true" :controls="false" :show-center-play-btn="false"
										enable-play-gesture :initial-time="0" duration="2000" class="video"
										:id="'id'+index" :src="item.intro||item.video" loop
										:enable-progress-gesture="false" v-if="index == current_index">
									</video>
									<view class="content">
										<view class="avatar " @click="handleToShop(designer)">
											<view>
												<StAvatar :designer="designer"></StAvatar>
											</view>
											<view class="d-flex a-center"
												style="height: 50rpx;line-height: 50rpx;margin-left: 16rpx;">
												<view class="name" style="">{{ item.username }}</view>
												<view class="" style="margin-left: 10rpx;">
													<view v-if="designer.is_online===1" class="d-flex a-center j-center"
														style=" gap:4rpx;height: 28rpx;border-radius: 8rpx;background-color: #E0FAD9;">
														<view class="rounded-circle"
															style="margin-left: 6rpx; width: 8rpx;height:8rpx ;background-color: #6BC54A;">
														</view>
														<view class="d-flex a-center" style="padding-right: 6rpx;">
															<text style="color: #76BD53;font-size: 16rpx;">在线</text>
														</view>
													</view>
													<view class="d-flex a-center j-center" v-else
														style="gap:4rpx;height: 28rpx;border-radius: 8rpx;background-color: #E7E7E7;">
														<view class="rounded-circle"
															style="margin-left: 6rpx;width: 8rpx;height: 8rpx;background-color: #818181;">
														</view>
														<view class="d-flex a-center" style="padding-right: 6rpx;">
															<text style="color: #818181;font-size: 16rpx;">离线</text>
														</view>
													</view>
												</view>
												<view class="" style="margin-left: 16rpx;">
													<span
														style="font-size: 24rpx;font-weight: 350;color: #FFFFFF;">进去逛逛>></span>
												</view>
											</view>
										</view>
										<view class="desc-container">
											<fold-text  :text="item.good_at" :lineCount="2" :fontSize="28" />


										</view>

										<view class="">

										</view>
									</view>
									<view class="content-right">
										<view class="item">
											<view class="icon" @click="collect" v-if="!is_collect">
												<image src="/static/images/ysmHome/dianzan.png" mode="widthFix">
												</image>
											</view>
											<view class="icon" @click="collect" v-if="is_collect">
												<image src="/static/images/ysmHome/yidian.png" mode="widthFix">
												</image>
											</view>
											<view class="text" style="font-size: 20rpx;">{{ designer.zans || 0 }}</view>
										</view>
										<view class="item" @click="comment">
											<view class="icon">
												<image src="/static/images/ysmHome/pinglun.png" mode="widthFix">
												</image>
												<!-- <image v-else src="../../static/images/ysmHome/icon-star.png"
													mode="widthFix"></image> -->
											</view>
											<view class="text" style="font-size: 20rpx;">{{ designer.comments || 0 }}
											</view>
										</view>
										<view class="item share-warp" style="margin-bottom: 0;">
											<view class="icon">
												<image src="../../static/images/ysmHome/icon-share.png" mode="widthFix">
												</image>
											</view>

											<button open-type="share" class="share-btn">转发</button>
										</view>
									</view>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
		</view>

		<!-- <view class="content">
			<view class="avatar" @click="handleToShop(designer)">
				<view>
					<StAvatar :designer="designer"></StAvatar>
				</view>
				<view class="name">{{ designer.username }} <span
						style="font-size: 24rpx;margin-left: 20rpx;font-weight: 200;">进店逛逛>></span> </view>
			</view>
			<view class="center-content" v-if="current.title"> {{ current.title }} </view>
			 
			<view class="bottom-con" v-if="current.video_desc">
				{{ current.video_desc }}		 
			</view>
		</view> -->

		<!-- 右侧定位 查看 收藏 转发 -->
		<!-- <view class="content-right">
			<view class="item">
				<view class="icon">
					<image src="../../static/images/ysmHome/icon-eye.png" mode="widthFix"></image>
				</view>
				<view class="text">{{ current.viewed_num || 0 }}</view>
			</view>
			<view class="item" @click="collect">
				<view class="icon">
					<image v-if="isCollect" src="../../static/images/ysmHome/icon-stared.png" mode="widthFix"></image>
					<image v-else src="../../static/images/ysmHome/icon-star.png" mode="widthFix"></image>
				</view>
				<view class="text">收藏</view>
			</view>
			<view class="item share-warp">
				<view class="icon">
					<image src="../../static/images/ysmHome/icon-share.png" mode="widthFix"></image>
				</view>
				<view class="text">
					转发
				</view>
				<button open-type="share" class="share-btn">转发</button>
			</view>
		</view> -->
		<u-popup round='16' @close="commentHidenClick()" :closeable='true' :show="commentShow" mode="bottom">
			<view class="commentPop">
				<view style="width: 100%; text-align: center; font-size: 32rpx; color: black; margin-bottom: 32rpx;">
					共{{designer.comments}}条评论</view>
				<u-list :scroll-top="commentReuqest.scrollTop" height="60vh" @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in commentList" :key="index">
						<view class="comment-item">
							<image :src="item.avatar" class="comment-item-avatar"></image>
							<view class="comment-item-right">
								<view
									style="margin-bottom: 14rpx; display: flex; flex-direction: row;align-items: flex-end;justify-content: flex-start;">
									<view class="comment-item-right__name">{{item.username?item.username:'游客'}}
									</view>
									<view v-if="item.username"
										style="margin-bottom: 5rpx; margin-left: 5rpx; font-size: 20rpx; color: rgb(153, 153, 153);">
										{{item.gender}}
									</view>
								</view>
								<view class="comment-item-right__desc" v-if="item.content">
									<view
										style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;"
										v-if="item.content == '点赞'">
										<view style="font-size: 26rpx; color: red;">{{item.content}}</view>
										<image style="margin-left: 10rpx; width: 40rpx; height: 40rpx;"
											:src="item.zan_url"></image>
									</view>
									<view v-else>
										{{item.content}}
									</view>
								</view>
								<view class="comment-item-right__imgBox"
									v-if="item.images && item.images.length > 0 && item.images[0] != ''">
									<image class="comment-item-right__imgItem" :src="img"
										v-for="(img,idx) in item.images" :key="idx">
									</image>

								</view>
								<view class="comment-item-right__time">{{item.createtime}}</view>

							</view>
						</view>
					</u-list-item>
					<view style="padding-top: 30rpx; box-sizing: border-box;" v-if="commentReuqest.isLoading">
						<u-loading-icon></u-loading-icon>
					</view>
				</u-list>


				<view class="commentInputBox">
					<input @keyboardheightchange="keyboardMove1" v-model="inputText" :show-confirm-bar="false" :adjust-position="false"
						placeholder="喜欢评价的人运气都不会差"></input>
					<image class="photoBtn" src="/static/images/ysmHome/tupian-comment.png"></image>

				</view>

			</view>
		</u-popup>
		<view v-if="showKeyboard" class="commentInputBigBox" :style="{bottom:inputBottom+'px'}">
			<view class="commentInputBox">
				<input v-model="inputText" :auto-focus="inputFocus" placeholder="喜欢评价的人运气都不会差"
					@keyboardheightchange="keyboardMove"></input>
				<image @click="photoBtnClick()" class="photoBtn" src="/static/images/ysmHome/tupian-comment.png">
				</image>
				<view @click="sendBtnClick()" class="sendBtn" v-if="inputText.length > 0 || imgList.length > 0">发送
				</view>
			</view>
			<view class="img-list" v-if="imgList && imgList.length > 0">
				<view class="imgItem" v-for="(item,index) in imgList" :key="index">
					<image class="pic" :src="item"></image>
					<image @click="deletePhoto(index)" class="img-list__del" src="/static/images/ysmHome/shanchu-2.png">
					</image>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import internal from 'stream';
	import StAvatar from '../../components/st-avatar/st-avatar.vue';

	export default {
		components: {
			StAvatar
		},
		data() {
			return {
				tempTitle: '',
				title: '',
				isShowMore: false,
				elementWidthRpx: 0,
				isOverFlow: false,
				contentStyle: 'line-height: 40rpx;',
				isCollect: false,
				strImage: '../../static/images/ysmHome/icon-star.png',
				strImaged: '../../static/images/ysmHome/icon-stared.png',
				touchStartX: 0, // 触屏起始点x  
				touchStartY: 0, // 触屏起始点y 
				contentHeight: 0,
				dataSouce: [],
				current: '',
				current_index: 0,
				isFullscreen: true,
				isPlaying: true,
				designer: {},
				is_paly: false,
				timer: '',
				index: 0,
				pren: 0,
				next: 0,
				data: [],
				dataLength: 0,
				is_collect: 0,
				commentShow: false,
				commentPage: 1,
				commentList: [],
				showKeyboard: false,
				inputBottom: 0,
				inputText: '',
				inputFocus: false,
				imgList: [],
				commentReuqest: {
					isLoading: true,
					isHasNext: true,
					scrollTop: 0,
				}
			}
		},
		onLoad(option) {
			if (option.dataSouce){
				let data = JSON.parse(decodeURIComponent(option.dataSouce));
				data.forEach(item=>{
					item.good_at = ''
					if (!item.username){
						item.username = ''
					}
				})
				this.data = data;
				this.dataLength = data.length
				if(!option.current && option.shop_id){
					if(data && data.length > 0){
						for(var i = 0; i<data.length-1; i++){
							var m1 = data[i]
							if(m1.id == option.shop_id){
								this.current = m1
								this.current_index = i;
								break
							}
						}
					}
				}
			}
		
			
			if (option.current){
				this.current = JSON.parse(decodeURIComponent(option.current));
			}
			if (option.current_index){
				this.current_index = option.current_index;
			}
			
			
			
			// this.tempTitle = this.current.title.substring(0, 40) + '...'
			// if (this.current.title.length > 40) {
			// 	this.title = this.tempTitle
			// 	this.isMore = true
			// } else {
			// 	this.title = this.current.title
			// 	this.isMore = false
			// }
			
			this.dataSouce = this.data
			// this.dataSouce[option.current_index] = this.current;
			this.timer = setInterval(() => {
				
				clearInterval(this.timer);
				this.timer = null;
				console.log('++++1', this.index);
			}, 1000)
			this.getDesignerInfo(this.current.user_id, 'basic', option.current_index);
			this.checkCollect(this.$store.state.user.id, this.current.id);


		},
		onShow() {
			
		},
		
		onShareAppMessage(){
			var url1 = '/pages/ysmIntroduceVidoe/ysmIntroduceVidoe?goHome=true'
			url1 = url1 + '&dataSouce='+ encodeURIComponent(JSON.stringify(this.data))
			url1 = url1 + '&shop_id='+this.current.id
			
			let shareobj = {
				title: '鱼水猫', 
				path: url1 
			}
			return shareobj
			
		},
		// mounted() {
		// 	const query = uni.createSelectorQuery().in(this)
		// 	query.select('#contentText').boundingClientRect((rect) => {
		// 		if (rect.height > 80) { // 修改为你的实际线高的两倍
		// 			this.contentStyle =
		// 				'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 40rpx;'
		// 			this.isOverFlow = true
		// 		}
		// 	}).exec()
		// },
		onReady: function() {

			this.getElementWidth();
			const {
				height
			} = wx.getMenuButtonBoundingClientRect()
			console.log(height)
			const {
				windowHeight
			} = wx.getSystemInfoSync()
			const paddingTop = wx.getStorageSync('navHeight') || (height + 8) * 2
			const contentHeight = windowHeight - paddingTop
			// 将计算结果保存到缓存中，方便下次使用
			// wx.setStorageSync('navHeight', contentHeight)
			this.contentHeight = contentHeight
		},
		methods: {
			showinfo(){
				this.designer.iSinfo = !this.designer.iSinfo
			},
			commentHidenClick() {
				this.commentShow = false,
					this.showKeyboard = false
				this.inputFocus = false
			},
			deletePhoto(index) {
				this.imgList = []
			},
			scrolltolower() {
				if (this.commentReuqest.isLoading || !this.commentReuqest.isHasNext) {
					return
				}
				this.commentPage++
				this.getDesignerInfo(this.current.user_id, 'comment');

			},
			inputClick() {
			
				let wanlLogin = uni.getStorageSync("wanlshop:user");
				if (wanlLogin != '') {
					this.showKeyboard = true
					this.$nextTick(res=>{
						this.inputFocus = true
					})
					
				} else {
					this.getTempLogin();
					//uni.navigateTo({
					//url: '/pagesYSM/ysmMy/auth/auth'
					//});
					this.showKeyboard = true
					this.$nextTick(res=>{
						this.inputFocus = true
					})
				}


			},
			keyboardMove(e) {
				this.count1 ++ 
				console.log('input0显示和隐藏')
				if (e.detail.height > 0) {
					// this.inputBottom = e.detail.height
					// this.showKeyboard = true
					// this.inputFocus = true
					console.log('input0显示')
				} else {
					console.log('input0隐藏')
					if (this.count1 == 1) return
					this.showKeyboard = false
					
				}
			},
			keyboardMove1(e){
				if (e.detail.height > 0) {
					this.showKeyboard = true
					if (this.inputBottom == 0){
						this.inputBottom = e.detail.height
					}
					
					this.$nextTick(res=>{
						this.inputFocus = true
					})
				}else{
					if (this.inputFocus){
						this.showKeyboard = false
					}
				}
			},

			toggleLimited() {
				// this.tempTitle = this.current.title
				this.isShowMore = !this.isShowMore
				if (this.isShowMore) {
					this.title = this.tempTitle
				} else {
					this.title = this.current.title
				}
			},
			temp() {
				console.log('111')
			},
			photoBtnClick() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						// 设置url的值，显示控件
						console.log('图片', res)
						var path = res.tempFilePaths[0];
						this.imgList = [path]
						this.inputClick()
					}
				});

			},
			sendBtnClick() {
				uni.showLoading()
				if (this.imgList && this.imgList.length > 0) {
					this.$api.upload({
						url: '/common/upload',
						filePath: this.imgList[0],
						name: 'file',
						success: res => {
							this.requestAddComment(res.url)
						}
					});
					return

				}
				this.requestAddComment()


			},
			requestAddComment(pic) {

				var param = {
					content: this.inputText,
					designer_id: this.designer.id,
					temp_userid: uni.getStorageSync("temp_userid")
				}
				if (pic) {
					param.images = pic
				}
				this.$api.get({
					url: '/wanlshop/usertemps/addComment',
					data: param,
					success: updata => {
						this.inputText = ''
						this.imgList = []
						this.inputFocus = false
						this.showKeyboard = false
						uni.hideLoading()
						uni.showToast({
							title: '评论成功',
							icon: 'none'
						})

						this.commentPage = 1
						this.getDesignerInfo(this.current.user_id, 'comment');




					}
				});
			},
			// switchShowMore() {
			// 	this.isShowMore = !this.isShowMore;
			// 	if (this.isShowMore) {
			// 		this.contentStyle = 'line-height: 40rpx;'
			// 	} else {
			// 		this.contentStyle =
			// 			'display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 40rpx;'
			// 	}
			// },
			getElementWidth() {
				const query = uni.createSelectorQuery();
				query.select('#desc').boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						let elementWidthPx = res[0].width; // 获取的px值
						let windowWidthPx; // 屏幕的px值
						uni.getSystemInfo({ // 获取设备信息
							success: (res) => {
								windowWidthPx = res.windowWidth; // 获取屏幕宽度
								this.elementWidthRpx = elementWidthPx / windowWidthPx * 750; // 转化为rpx
								console.log('元素宽度:', this.elementWidthRpx, 'rpx');
							}
						});
					} else {
						//console.error('获取元素宽度失败');
					}
				});
			},
			// current改变时会触发change 事件
			changefun(e) {
				let current = e.detail.current
				console.log("current:", current);
				//会报错 this.PayVideo 没值
				// uni.setNavigationBarTitle({
				// 	title: this.PayVideo[current].video_name
				// })
				// if (this.PayVideo[current].description) {
				// 	this.description = this.PayVideo[current].description
				// }
				// this.duration = this.PayVideo[current].video_time
				let videoContext = uni.createVideoContext('id' + this.current)
				videoContext.pause() //停止播放
			},
			// 动画结束时触发
			animationfinishfun(e) {
				let current = e.detail.current
				console.log("current1:", current);
				let videoContext = uni.createVideoContext('id' + this.current_index)
				videoContext.pause() //停止播放非当前视频
				videoContext = uni.createVideoContext('id' + current)
				videoContext.play() //开始播放当前视频
				this.current_index = current //保存当前下标 播放下一个视频时停止上一个视频 防止声音重复
				this.current = this.dataSouce[this.current_index];
				this.getDesignerInfo(this.dataSouce[this.current_index].id,
					'basic', current);
			},
			//评论
			comment() {
				this.commentPage = 1
				this.commentList = []
				this.getDesignerInfo(this.current.user_id, 'comment');
				this.inputText = ''
				this.commentShow = true

			},

			//收藏 临时id
			collect() {
				let wanlLogin = uni.getStorageSync("wanlshop:user");

				if (wanlLogin != '') {
					this.isCollect = this.isCollect == true ? false : true;
					this.userCollect(this.$store.state.user.id, this.current.id);
				} else {
					//想不通临时登录的意义,而且写法也错误
					this.getTempLogin();
					this.userCollect(uni.getStorageSync("temp_userid"), this.current.id);
					//uni.navigateTo({
					//	url: '/pagesYSM/ysmMy/auth/auth'
					//});
				}

			},
			// 临时登录
			async getTempLogin() {
				if (uni.getStorageSync("temp_userid") && uni.getStorageSync('temp_username')) {
					console.log('收藏=1')
					return false;
				}

				await this.$api.get({
					url: '/wanlshop/usertemps/login',
					data: {},
					success: res => {
						uni.setStorageSync('temp_userid', '');
						uni.setStorageSync('temp_username', '');

						uni.setStorageSync('temp_username', res.temp_username);
						uni.setStorageSync('temp_userid', res.id);


						return false;
					}
				});
			},
			// 获取设计师详情
			async getDesignerInfo(id, type, currentIndex) {

				var param = {
					type: type,
					id: id
				}
				if (type == 'comment') {
					param.page = this.commentPage
					this.commentReuqest.isLoading = true
					if (param.page == 1) {
						this.commentReuqest.isHasNext = true
					}
				}
				await this.$api.get({
					url: '/wanlshop/user/getDesignerInfo',
					data: param,
					success: res => {
						if (type === 'basic') {
							res.iSinfo = false
							this.designer = res;
							if (!this.dataSouce[currentIndex].username){
								this.dataSouce[currentIndex].username = res.username
							}
							this.dataSouce[currentIndex].good_at = res.good_at
						}
						if (type == 'comment') {
							setTimeout(res1 => {
								this.commentReuqest.isLoading = false
								if (res.length < 10) {
									this.commentReuqest.isHasNext = false
								}
								if (this.commentPage == 1) {
									this.commentList = res
									this.commentReuqest.scrollTop = this.commentReuqest
										.scrollTop == 0 ? -1 : 0
								} else {
									this.commentList = this.commentList.concat(res)
								}
							}, 1000)


						}
					},
					fail: err => {
						this.commentReuqest.isLoading = false
						if (type == 'comment') {
							this.commentPage = this.commentPage == 1 ? 1 : this.commentPage - 1
						}
					}
				});
				
				let wanlLogin = uni.getStorageSync("wanlshop:user");
				
				if (!wanlLogin) {	
					this.getTempLogin();
				}
			},
			async userCollect(id, video_id) {
				console.log('收藏', id, video_id)
				await this.$api.get({
					url: id > 10000000 ? '/wanlshop/usertemps/userCollect' : '/wanlshop/user/userCollect',
					data: {
						id,
						video_id
					},
					success: res => {
						console.log('userCollect', res)

						if (res) {
							this.is_collect = res
							this.designer.zans = this.designer.zans + 1;
						} else {
							this.is_collect = res
							this.designer.zans = this.designer.zans - 1;
						}
					}
				});
			},

			async checkCollect(id, video_id) {
				if (!id && uni.getStorageSync("temp_userid") && uni.getStorageSync('temp_username')) {
					id = uni.getStorageSync("temp_userid");
				}
				let that = this;
				await this.$api.get({
					url: '/wanlshop/user/checkCollect',
					data: {
						id,
						video_id,
						type: 2
					},
					success: res => {
						console.log('checkCollect', res)
						if (res == true) {
							that.isCollect = true;
							this.is_collect = true;
						} else {
							that.isCollect = false;
							this.is_collect = false;
						}
					}
				});
			},
			loadedmetadata(e) {
				console.log(e)
				let videoContext = uni.createVideoContext('myVideo', this);
				this.videoContext = videoContext;
				// videoContext.requestFullScreen();
				// videoContext.play();
				console.log(uni.createVideoContext('myVideo', this))
				// this.videoContext = uni.createVideoContext('myVideo', this);
				// this.videoContext.requestFullScreen();
				// this.videoContext.play();
				// this.videoContext.showStatusBar();
			},
			handleTap() {
				// this.isPlaying = !this.isPlaying
				if (this.isPlaying) {
					this.videoContext.pause();
					this.isPlaying = false;
				} else {
					this.videoContext.play();
					this.isPlaying = true;
				}
			},
			endPlay() {
				// this.is_paly = false,
				// this.isPlaying = false;
				// this.onPlay();
			},
			onPause(e) {
				console.log(e)
				this.is_paly = false,
					this.videoContext.pause()
			},
			onPlay() {
				console.log('开始播放11111')
				this.videoContext.play()
			},
			handleToShop(item) {
				let data = encodeURIComponent(JSON.stringify(this.dataSouce));
				let index = this.current_index
				let current = encodeURIComponent(JSON.stringify(this.current));
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}&current=${current}&dataSouce=${data}&current_index=${index}`
				})
			},
		},
		beforeDestroy() {
			// 关闭页面前停止视频播放
			//this.videoContext.pause()
		}
	}
</script>

<style lang="less" scoped>
	.btn::before {
		content: '展开';
	}

	.exp:checked+.text .btn::before {
		content: '收起';
	}

	.btn {
		float: right;
		clear: both;
	}

	.text::before {
		content: '';
		height: calc(100%-40rpx);
		float: right;
	}

	.exp:checked+.text {
		-webkit-line-clamp: 999;
	}

	.desc-container {
		width: 550rpx;
		color: white;
		
		

		.express {
			display: flex;
			// width: 100%;
			width: 555rpx;
			background-color: red;
			flex-direction: column;
			// padding: 30rpx;

			position: relative;

			.info {
				display: flex;
				flex-direction: column;

				.tips {
					width: 140rpx;
					height: 40rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					color: #0078FF;
					background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);

					position: absolute;
					right: 0px;
					bottom: 0px;
				}
			}

		}

		// 收起 按钮
		.hidebtn {
			display: flex;
			flex: 1;
			justify-content: flex-end;
			color: #0078FF;
			font-size: 28rpx;
		}

		// 展开 文字
		.hide {
			word-break: break-word; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字，超过2行显示省略号
			display: -webkit-box;
			-webkit-line-clamp: 2; //此处为上限行数
			-webkit-box-orient: vertical;
		}


	}

	.desc-text {
		color: #fff;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.expand-desc {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.circle {
		background: rgba(34, 34, 34, 0.4);
		border-radius: 50%;
		z-index: 2;
		height: 70px;
		width: 70px;
		position: fixed;
		top: 0;
		bottom: 441rpx;
		left: 31rpx;

		margin: auto;

		.red {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 3;
			height: 35px;
			width: 35px;
		}
	}

	.swiper {
		height: 100vh;

		.swiper-item {
			height: 100vh;
			position: relative;
		}

		.uni-bg-black {
			background: black;
		}
	}

	.video {
		width: 100%;
		height: 100%;
		//position: relative;
	}

	.main {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #000;

		/deep/ .st-navigation {
			height: 0 !important;
		}

		.video-wrap {
			width: 100%;
			height: 100%;
			background: #000;

			.video {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		position: absolute;
		z-index: 9999999;
		bottom: 88rpx;
		left: 40rpx;
		right: 68px;

		/deep/ .avatar {
			display: flex;
			align-items: center;
			// margin-bottom: 40rpx;

			margin-left: -6rpx;
			margin-bottom: 24rpx;

			.designer-avatar {
				width: 140rpx;
				height: 140rpx;

				.designer_level {
					height: 42rpx;
				}
			}

			.name {
				// margin-left: 20rpx;
				font-size: 36rpx;
				font-weight: 700;
				color: #fff;
			}
		}

		.center-content {
			// margin-bottom: 20rpx;
			line-height: 30rpx;
			font-size: 28rpx;
			color: #fff;
		}

		.bottom-con {
			display: flex;
			color: #fff;
			margin-bottom: 22rpx;
			font-size: 28rpx;
			// .item {
			//   margin-right: 20rpx;
			//   font-size: 24rpx;

			// }
		}
	}

	.content-right {
		position: absolute;
		z-index: 9999999;
		bottom: 88rpx;
		right: 40rpx;
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;

			.icon {
				width: 75rpx;
				height: 72rpx;
				border-radius: 50%;
				// background-color: rgba(0, 0, 0, 0.5);
				color: #fff !important;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #fff;
			}

			&:nth-child(1) .text {
				margin-top: 4rpx !important;
			}
		}

		.share-warp {
			position: relative;

			/deep/.share-btn {
				position: absolute;
				top: 0;
				left: -30rpx;
				background: transparent;
				color: transparent;
				height: 100rpx;
				width: 100rpx;
				z-index: 9999999;
				border: none;

				&::after {
					border: none;
				}
			}
		}
	}

	.commentPop {
		width: 100vw;
		box-sizing: border-box;
		padding-top: 30px;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

	}

	.comment-item {
		width: 690rpx;
		margin-left: 30rpx;
		padding: 30rpx 0rpx 30rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;

		border-bottom: 1px solid rgb(238, 238, 238);

		.comment-item-avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 45rpx;
			margin-right: 16rpx;
			background-color: rgb(230, 230, 230);
		}

		.comment-item-right {
			flex: 1;
			position: relative;


			&__name {
				max-width: 350rpx;
				font-size: 28rpx;
				color: rgb(153, 153, 153);
			}

			&__desc {
				font-size: 28rpx;
				color: #000;
				text-align: left;
				margin-bottom: 16rpx;
			}

			&__imgBox {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 16rpx;
			}

			&__imgItem {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				margin-right: 12rpx;
				background-color: rgb(230, 230, 230);
			}

			&__time {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				font-size: 24rpx;
				color: rgb(153, 153, 153);
			}

			/*     &__line {
	     margin-top: 30rpx;
	     width: 100%;
	     height: 1px;
	     background-color: rgb(238, 238, 238);
	
	    } */
		}
	}

	.comment-item :last-child {
		&__line {
			margin-top: 30rpx;
			width: 100%;
			height: 1px;
			background-color: rgba(238, 238, 238, 0);

		}
	}



	.commentInputBigBox {
		z-index: 99999999;

		position: fixed;
		left: 0;
		width: 100vw;
		background-color: white;

		.img-list {
			margin-top: -10rpx;
			margin-left: 35rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			width: 680rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;

			.imgItem {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				margin-right: 30rpx;

				.pic {
					margin-top: 15rpx;
					width: 100rpx;
					height: 100rpx;
				}
			}

			.img-list__del {
				position: absolute;
				right: 5rpx;
				top: 0rpx;
				width: 30rpx;
				height: 30rpx;
			}

		}

	}

	.commentInputBox {
		margin-left: 30rpx;
		width: 690rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: rgb(238, 238, 238);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-right: 20rpx;
		box-sizing: border-box;

		input {
			margin-left: 40rpx;
			flex: 1;
			font-size: 28rpx;
		}

		.photoBtn {
			margin-left: 20rpx;
			width: 80rpx;
			height: 80rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.sendBtn {
			margin-left: 10rpx;
			width: 110rpx;
			height: 56rpx;
			font-size: 24rpx;
			background-color: red;
			color: white;
			text-align: center;
			border-radius: 28rpx;
			line-height: 56rpx;
		}

	}
</style>